<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="22">
            <img :src="icon" />
            <div class="firm">{{ firm }}</div>
          </el-col>
          <el-col :span="2" class="out">
            <el-button type="info" @click="outLogin" class="el-icon-switch-button" size="mini">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-active="index.toString()" class="el-menu-vertical-demo">
            <el-menu-item :index="index | string" v-for="(item, index) in menuList" :key="index" @click="toURL(item.url)">
              <i class="el-icon-document"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      icon: require("../../assets/image/logo.svg"),
      firm: "盾联管理后台",
      index: 0,
      menuList: [
        {
          name: "用户列表",
          key: "userList",
          url: "/userList",
        },
        {
          name: "项目列表",
          key: "projectList",
          url: "/projectList",
        },

        {
          name: "分类列表",
          key: "classifyList",
          url: "/classifyList",
        },
        {
          name: "材料列表",
          key: "materialsList",
          url: "/materialsList",
        },
        {
          name: "报销列表",
          key: "expenseList",
          url: "/expenseList",
        },
        {
          name: "职位列表",
          key: "jobtitle",
          url: "/jobtitle",
        },
        {
          name: "供应商列表",
          key: "supplier",
          url: "/supplier",
        },
        {
          name: "科目列表",
          key: "subject",
          url: "/subject",
        },
        {
          name: "商品列表",
          key: "materialScience",
          url: "/materialScience",
        },
        {
          name: "入账",
          key: "entry",
          url: "/entry",
        },
      ],
    };
  },
  filters: {
    string(e) {
      return e.toString();
    },
  },
  methods: {
    toURL(url) {
      this.$router.push({ path: url });
    },
    outLogin() {
      this.$confirm("是否退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
          this.$router.push({ path: "/" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    let current = this.$route.path;
    this.menuList.forEach((v, i) => {
      if (v.url == current) {
        this.index = i.toString();
      }
    });
  },
  computed: {},
};
</script>

<style scoped lang="sass">
.firm
  padding-left: 20px
  .el-row
    height: 100%
    .el-col
      height: 100%
      display: flex
      align-items: center
    img
      height: 100%
    .el-menu-vertical-demo
      height: 100%
    .el-main
      height: calc(100vh - 100px)

.el-aside
  border-right: solid 1px #e6e6e6
.el-menu
  border: none
</style>